/*
 * @Author: yuliang
 * @Date: 2020-9-14 16:48:10
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-05-27 17:18:34
 * @Description:
 */

import React from 'react';
import {
  StyleSheet,
  Text,
} from 'react-native';
import {
  px2dp
} from '@/styles';

export default class TypeAssemble extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { lineData, style, boxStyle } = this.props;
    return (
      <Text style={[styles.main, boxStyle]}>
        {
          lineData.map((item, index) => {
            if (item) {
              return <Text>
                <Text>{item}</Text>
                {
                  index == lineData.length - 1 ? ''
                    :
                    (
                      lineData[index + 1] ? <Text style={[styles.line, style]}> | </Text>
                        :
                        ''
                    )
                }
              </Text>;
            }
          })
        }
      </Text>
    );
  }
}

const styles = StyleSheet.create({
  line: {
    height: px2dp(16) * 2,
    width: px2dp(1),
    marginLeft: px2dp(7) * 2,
    marginRight: px2dp(7) * 2
  },
  main: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '100%',
  }
});
